<template>
  <van-popup :show="visible" round :customer-type="customerType" :position="position" :close-icon="closeIcon" :z-index="zIndex" :closeable="closeable" :closeOnClickOverlay="closeOverlay" @click-overlay="clickOverlay" @close="clickClose"> 
    <slot></slot>
  </van-popup>
</template>

<script>
export default {
  props:{
      title: {
          type: String,
      },
      position: {
        type: String,
        default: () => 'center'
      },
      customStyle:{
        type: String,
      },
      zIndex: {
        type: Number,
        default: () => 100,
      },
      closeable: {
        type: Boolean,
        default: () => true,
      },
      closeOverlay:{
        type: Boolean,
        default: () => false,
      },
      closeIcon:{
        type: String,
        default: () => 'cross'
      }
  },
  data(){
      return{
          visible: false,
      }
  },
  methods:{
    init(id){
      this.visible = true; 
    },
    clickOverlay(){
      if(this.closeOverlay){
        this.visible = false;
        this.$emit('close');
      }
    },
    clickClose(){
      this.visible = false;
      this.$emit('close');
    }
  }
}
</script>